<template>
  <div class="custom-field-demo">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>CustomField 组件演示</span>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
      </template>
      
      <el-form :model="formData" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="文本输入">
              <CustomField
                :field="fields.text"
                v-model="formData.text"
                @change="handleFieldChange('text', $event)"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="多行文本">
              <CustomField
                :field="fields.textarea"
                v-model="formData.textarea"
                @change="handleFieldChange('textarea', $event)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="数字输入">
              <CustomField
                :field="fields.number"
                v-model="formData.number"
                @change="handleFieldChange('number', $event)"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="邮箱输入">
              <CustomField
                :field="fields.email"
                v-model="formData.email"
                @change="handleFieldChange('email', $event)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="日期选择">
              <CustomField
                :field="fields.date"
                v-model="formData.date"
                @change="handleFieldChange('date', $event)"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="日期时间">
              <CustomField
                :field="fields.datetime"
                v-model="formData.datetime"
                @change="handleFieldChange('datetime', $event)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单选框">
              <CustomField
                :field="fields.radio"
                v-model="formData.radio"
                @change="handleFieldChange('radio', $event)"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="复选框">
              <CustomField
                :field="fields.checkbox"
                v-model="formData.checkbox"
                @change="handleFieldChange('checkbox', $event)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="下拉选择">
              <CustomField
                :field="fields.select"
                v-model="formData.select"
                @change="handleFieldChange('select', $event)"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="开关">
              <CustomField
                :field="fields.switch"
                v-model="formData.switch"
                @change="handleFieldChange('switch', $event)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="图片上传">
              <CustomField
                :field="fields.image"
                v-model="formData.image"
                @change="handleFieldChange('image', $event)"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="文件上传">
              <CustomField
                :field="fields.file"
                v-model="formData.file"
                @change="handleFieldChange('file', $event)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24">
            <el-form-item label="标签选择">
              <CustomField
                :field="fields.tags"
                v-model="formData.tags"
                @change="handleFieldChange('tags', $event)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24">
            <el-form-item label="富文本编辑">
              <CustomField
                :field="fields.editor"
                v-model="formData.editor"
                @change="handleFieldChange('editor', $event)"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>表单数据</span>
      </template>
      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import CustomField from '@/components/CustomField/index.vue'
import type { ModelField } from '@/types/api'

// 表单数据
const formData = reactive<Record<string, any>>({})

// 字段配置
const fields: Record<string, ModelField> = {
  text: {
    name: 'text',
    label: '文本输入',
    type: 'text',
    required: true,
    placeholder: '请输入文本',
    validation: {
      maxLength: 50
    }
  },
  
  textarea: {
    name: 'textarea',
    label: '多行文本',
    type: 'textarea',
    placeholder: '请输入多行文本',
    settings: {
      rows: 4
    }
  },
  
  number: {
    name: 'number',
    label: '数字输入',
    type: 'number',
    placeholder: '请输入数字',
    validation: {
      min: 0,
      max: 100
    },
    settings: {
      precision: 2
    }
  },
  
  email: {
    name: 'email',
    label: '邮箱输入',
    type: 'email',
    placeholder: '请输入邮箱地址'
  },
  
  date: {
    name: 'date',
    label: '日期选择',
    type: 'date',
    placeholder: '请选择日期'
  },
  
  datetime: {
    name: 'datetime',
    label: '日期时间',
    type: 'datetime',
    placeholder: '请选择日期时间'
  },
  
  radio: {
    name: 'radio',
    label: '单选框',
    type: 'radio',
    options: [
      { value: 'option1', label: '选项1' },
      { value: 'option2', label: '选项2' },
      { value: 'option3', label: '选项3' }
    ]
  },
  
  checkbox: {
    name: 'checkbox',
    label: '复选框',
    type: 'checkbox',
    options: [
      { value: 'check1', label: '复选1' },
      { value: 'check2', label: '复选2' },
      { value: 'check3', label: '复选3' }
    ]
  },
  
  select: {
    name: 'select',
    label: '下拉选择',
    type: 'select',
    placeholder: '请选择',
    options: [
      { value: 'select1', label: '下拉1' },
      { value: 'select2', label: '下拉2' },
      { value: 'select3', label: '下拉3' }
    ],
    settings: {
      multiple: false
    }
  },
  
  switch: {
    name: 'switch',
    label: '开关',
    type: 'switch',
    defaultValue: false
  },
  
  image: {
    name: 'image',
    label: '图片上传',
    type: 'image',
    placeholder: '请选择图片'
  },
  
  file: {
    name: 'file',
    label: '文件上传',
    type: 'file',
    placeholder: '请选择文件'
  },
  
  tags: {
    name: 'tags',
    label: '标签选择',
    type: 'tags',
    placeholder: '请选择或输入标签',
    settings: {
      predefinedTags: ['前端', '后端', '数据库', '运维', '设计', '产品', '测试']
    }
  },
  
  editor: {
    name: 'editor',
    label: '富文本编辑',
    type: 'editor',
    placeholder: '请输入内容...'
  }
}

// 处理字段变化
const handleFieldChange = (fieldName: string, value: any) => {
  console.log(`字段 ${fieldName} 变化:`, value)
}

// 处理提交
const handleSubmit = () => {
  console.log('提交数据:', formData)
  ElMessage.success('数据已输出到控制台')
}
</script>

<style scoped lang="scss">
.custom-field-demo {
  padding: 20px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  pre {
    background-color: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    max-height: 400px;
    overflow-y: auto;
  }
}
</style>
